<script>
import {postMst, putRenew} from "@/api/system/config";
import item from "@/layout/components/Sidebar/Item.vue";

export default {
  // 消息管理(notIfy)
  name: "index",
  computed: {
    item() {
      return item
    }
  },
  data() {
    return {
      // 接口参数
      query: {
        // 参数1：页数
        pageNum: 1,
        // 参数2：个数
        pageSize: 5
      },
      mine:{
        id:"1640521382515187714",
        operationId:'0',
      },
      // 消息内容接口声明
      getList:[],
      // 分页器
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
    }
  },

  created() {
    // 消息通知接口
    postMst(this.query).then(res => {
      // console.log(res)
      this.total=res.total
      // console.log(res.rows)
      this.getList=res.rows
      // console.log(this.getList)

    })
    putRenew(this.mine).then(res=>{
      // console.log(res)
    })

  },



  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.query.pageNum=val
      postMst(this.query).then(res=>{
        if (res.code===200){
          this.getList=res.rows
          // console.log(this.getData)
        }
      })
    },
    // 已读红点消失
    viewMessage(id){
      // console.log(id)
    },
    // 全部已读
    read(){
      // console.log(111)
    }

  },
}
</script>

<template>
  <!--  消息管理-->
  <div>
    <!--  内容部分区域-->
    <section class="app-main">
      <div>
        <!--      头部区域-->
        <div style="margin: 40px;">
          <div class="el-row" style="display: flex; align-items: center;">
            <!--          标题-->
            <div class="el-col el-col-18">
              <div style="font-size: 20px; align-items: center;">系统消息</div>
            </div>
            <!--          已读/已删-->
            <div class="el-col el-col-6">
              <div class="row-bg el-row is-justify-end el-row--flex">
                <button type="button" class="el-button el-button--default el-button--medium" ><span><div
                  class="grid-content bg-purple-light" @click="read">全部已读</div></span></button>
                <button style="margin-left: 20px" type="button" class="el-button el-button--default el-button--medium"><span><div
                  class="grid-content bg-purple-light">全部删除</div></span></button>
              </div>
            </div>
          </div>
        </div>
        <!--      内容区域-->
        <div class="content-box" v-for="item in getList" :key="item.id" @click="viewMessage(item.id)">
          <button type="button" class="el-button el-button--text el-button--medium">
          <span>
            <div class="span-box">
              <div class="el-badge item"  >
                {{item.psyMessages[0].title}}
              </div>

              <div> {{ item.psyMessages[0].sendTime }}</div>
            </div>
            <div class="cont">{{item.psyMessages[0].content}}</div>
          </span>
          </button>
        </div>
        <!--      分页器-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="36">
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
.hasTagsView .app-main {
  min-height: calc(100vh - 84px);
}

.app-main {
  width: 100%;
  position: relative;
  overflow: hidden;
}

//标题盒子属性
.el-col-18 {
  width: 75%;
}

[class*=el-col-] {
  float: left;
  box-sizing: border-box;
}

.el-col-6 {
  width: 25%;
}

[class*=el-col-] {
  float: left;
  box-sizing: border-box;
}

.el-row--flex.is-justify-end {
  -webkit-box-pack: end;
  justify-content: flex-end;
}

.el-row--flex {
  display: flex;
}

.el-row {
  position: relative;
  box-sizing: border-box;
}

.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  //border-color: #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 400;
  -webkit-user-select: none;
}


//内容属性
.content-box {
  margin: 10px 40px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 6px;
  padding: 20px;
  overflow: hidden;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  -webkit-appearance: none;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 400;
  -webkit-user-select: none;
}

.el-button--text {
  width: 100%;
  text-align: left;
  border-color: transparent;
  color: #1890ff;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px
}

.span-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: black;
}

.item {
  color: #000;
}

.el-badge {
  position: relative;
  vertical-align: middle;
  display: inline-block;
}

.item{
  margin-top: 10px;
  margin-right: 40px;
}

.cont {
  margin: 15px 0 0 0;
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block {
  text-align: end;
  margin: 50px 100px;
  overflow: hidden;
}

.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}

.el-pagination span:not([class*=suffix]) {
  display: inline-block;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  box-sizing: border-box;
}

.el-pagination__total {
  margin-right: 10px;
  font-weight: 400;
  color: #606266;
}
.el-badge__content.is-fixed.is-dot{
  right:4px;
}
.el-badge__content.is-dot{
  height: 8px;
  width: 8px;
  padding: 0;
  border-radius: 50%;
}
</style>

